import React, { Component } from 'react'
import { Container, Content } from 'native-base'
import { ImageBackground, TouchableOpacity, Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux'
import QRCode from 'react-native-qrcode-svg'
import { connect } from 'react-redux'
import pxToDp, { deviceHeightDp } from '../../libs/pxToDp'
import commonStyle from '../../libs/commonStyle'
import API from '../../api/request'

class Qrcode extends Component {
	constructor(arg) {
	    super(arg)
		this.state = {
			webpageUrl: ''
		}
	}
	_onBack() {
		Actions.pop()
	}
	
	componentDidMount() {
		this.updateWebpageurl()
	}
	
	// 更新分享链接
	async updateWebpageurl () {
		const { userId } = this.props.user || {}
		let webpageUrl = await this.getData(userId)
		this.setState({
			webpageUrl
		})
	}
	
	// 获取分享链接
	async getData(userId) {
		let res = await API.get('/api/skip/downloadJump', { myid: userId })
		if (res && res.code === '200') {
			return res.data
		}
	}
	render() {
		return (
			<Container>
				<Content>
					<ImageBackground
						resizeMode="cover"
						style={{ width: '100%', height: deviceHeightDp }}
						source={require('../../../assets/imgs/qrcode-facetoface-min.jpeg')}
					>
						<TouchableOpacity
							style={[
								commonStyle.flexCenter,
								commonStyle.w80,
								commonStyle.h80,
								commonStyle.circle40,
								{
									position: 'absolute',
									top: 50,
									left: 20,
									backgroundColor: 'rgba(255,255,255,0.5)'
								}
							]}
							onPress={this._onBack.bind(this)}
						>
							<Text
								style={[
									commonStyle.activeColor,
									commonStyle.fontBold
								]}
							>
								返回
							</Text>
						</TouchableOpacity>
						{this.state.webpageUrl? (
							<View
								style={[
									{
										position: 'absolute',
										left: '50%',
										bottom: pxToDp(222),
										marginLeft: -pxToDp(268) / 2
									}
								]}
							>
								<QRCode
									value={this.state.webpageUrl}
									size={pxToDp(272)}
									color="#C30D23"
								/>
							</View>
						): <Text />}
						
					</ImageBackground>
				</Content>
			</Container>
		)
	}
}

export default connect(state => ({
	user: state.user.user
}))(Qrcode)
